<template>
	<div class="evidence-unit-casePrint-container">
		<el-dialog title="案件标签打印" v-model="isShowDialog" width="450px">
			<div id="eviPrinter" style="padding: 10px; border: 0px solid AliceBlue">
				<div style="font-size: 18px; font-weight: bold; width: 100%; text-align: center; margin-bottom: 10px;font-family: Arial, Helvetica, sans-serif;">{{ info.hostUserOrganName }}</div>
				<el-form size="small" label-width="110px" style="text-align: left">
					<el-row :gutter="35">
						<el-col :xs="24" class="mb10">
							<el-form-item label="文书编号："> {{ info.caseNo }} </el-form-item>
						</el-col>
						<el-col :xs="24" class="mb10">
							<el-form-item label="案件性质："> {{ info.inspectionNo }} </el-form-item>
						</el-col>
						<el-col :xs="24" class="mb10">
							<el-form-item label="案件名称："> {{ info.caseName }} </el-form-item>
						</el-col>
						<el-col :xs="24" class="mb10">
							<el-form-item label="案发时间："> {{ dateFormat(info.caseTime) }} </el-form-item>
						</el-col>
						<el-col :xs="24" class="mb10">
							<el-form-item label="案件类型："> {{ info.caseTypeName }} </el-form-item>
						</el-col>
								<el-col :xs="24" class="mb10">
								<img id="barcode" style="margin-left: 10px; width: 350px;height:50px;" />
							</el-col>
					</el-row>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="goPrint" size="small">打 印</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs, nextTick, computed, watch } from 'vue';
import JsBarcode from 'jsbarcode';
import printJS from 'print-js';
import { dateFormat } from '/@/common';
import { printCaseTag } from '/@/api/tag/index';
import { ElMessage } from 'element-plus';
import { Session } from '/@/utils/storage';
export default {
	name: 'casePrint',
	setup() {
		const state = reactive({
			isShowDialog: false,
			info: {},
		});
		// 打开弹窗
		const openDialog = (data: Object) => {
			state.isShowDialog = true;
			Object.assign(state.info, data);
			nextTick(() => {
				JsBarcode('#barcode', state.info.caseNo, {
					format: 'CODE128',
					lineColor: '#000',
					background: '#EBEEF5',
					width: 4,
					height: 40,
					displayValue: false,
				});
			});
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		//打印
		const style = '@page {margin:0 0mm;size:100mm 70mm;};';
		const goPrint = () => {
			printJS({
				printable: 'eviPrinter',
				type: 'html',
				targetStyles: ['*'],
				style,
				repeatTableHeader: true,
				ignoreElements: ['no-print', 'bc', 'gb'],
				maxWidth: 1000,
			});
		};
		const getJsBarcode = computed(() => (no) => {
			return '';
		});

		return {
			openDialog,
			closeDialog,
			getJsBarcode,
			onCancel,
			goPrint,
			dateFormat,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
@page {
	margin: 20px auto;
}
/deep/ .el-dialog__body {
	height: 300px;
	color: black; font-weight: lighter;	
	font-family: Arial, Helvetica, sans-serif;
}
/deep/ .mb10{height: 22px; margin-bottom: 0px;} 
/deep/ .el-form-item__label {color: black; font-weight: lighter;font-family: Arial, Helvetica, sans-serif;}
</style>
